<template>
    <div class="flex-column">
          <input type="button" value='点我试试' @click="clickMe"></input>
          <div if="{{state}}"><text>hahaha</text></div>
          <div else><text>hehehe</text></div>
          <swiper autoplay='true' loop='true'>
              <image for="{{swiperArr}}" src='{{$item}}'></image>
          </swiper>
          <div class="tabList mt30 justify-around">
              <div class="item flex-column" for='{{tabListArr}}'>
                  <image src='{{$item.imgSrc}}'></image>
                  <text>{{$item.title}}</text>
              </div>
          </div><!-- tabList end -->
  
          <div class="hotList mt30 flex-column">
              <div class="title justify-between">
                  <text>热门歌单</text>
                  <text>更多&gt;</text>
              </div>
              <div class="hotListWrap flex-wrap justify-between">
                  <div class="item flex-column" for="{{hotListArr}}">
                      <image src='{{$item.imgSrc}}'></image>
                      <text>{{$item.title}}</text>
                  </div>
              </div>
          </div>
      </div>
  </template>
  
  <script>
      export default{
          private:{
              state:false,
              msg:'哈哈哈',
              swiperArr:['../assets/slide01.jpg','../assets/slide02.jpg','../assets/slide03.png'],
              tabListArr:[
                  {imgSrc:'../assets/icon_tab_01.png',title:'每日30首'},
                  {imgSrc:'../assets/icon_tab_02.png',title:'虾米电台'},
                  {imgSrc:'../assets/icon_tab_03.png',title:'时光小憩'},
                  {imgSrc:'../assets/icon_tab_04.png',title:'排行榜'},
              ],
              hotListArr:[
                  {imgSrc:'../assets/img01.jpg',title:'[欧美] 夏日仙嗓怦然心动1'},
                  {imgSrc:'../assets/img01.jpg',title:'[欧美] 夏日仙嗓怦然心动2'},
                  {imgSrc:'../assets/img01.jpg',title:'[欧美] 夏日仙嗓怦然心动3'},
                  {imgSrc:'../assets/img01.jpg',title:'[欧美] 夏日仙嗓怦然心动4'},
                  {imgSrc:'../assets/img01.jpg',title:'[欧美] 夏日仙嗓怦然心动5'},
                  {imgSrc:'../assets/img01.jpg',title:'[欧美] 夏日仙嗓怦然心动6'}
              ]
          },
          clickMe:function(){
              console.log(this.state);
              this.state=!this.state
          }
      }
  </script>
  
  <style>
      .flex-column{
          width:90%;
          flex-direction: column;
      }
      .justify-around{
          justify-content: space-around;
      }
      .justify-between{
          justify-content: space-between;
      }
      .flex-wrap{
          flex-wrap: wrap;
      }
      .mt30{
          margin-top: 30px;
      }
      swiper{
          height: 300px;
      }
      swiper image{
          height: 300px;
      }
      .tabList{
          width: 100%;
          height: 100px;
          border:1px solid #000;
      }
      .hotList{
          border: 1px solid #000;
      }
      .hotListWrap .item{
          width: 26%;
      }
      .hotListWrap .item image{
      }
  </style>